<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异常处理</title>
</head>
<body>
    <!-- 
        提升代码运行的健壮性
        异常处理的类型：
            1、throw  抛出异常
            2、try/catch 捕获异常
            3、debugger  断点调试  
     -->
     <!-- 
        throw 抛异常
        异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

        ☆   throw 抛出异常信息，程序会终止执行
        ☆   throw 后面跟的是错误提示信息
        ☆   Error 对象配合throw使用，能够设置更详细的错误信息，通常我们new一个 Error对象出来

        throw 通常会和 new Error 配合使用,在控制台报错的时候，会显示在那一行发生了错误

        try catch 捕获错误信息（浏览器提供的错误信息）
        try{} 试试  catch（） 拦住  finally{} 最后都会执行
      -->

      <!-- 
         debugger 相当于打断点
       -->

       <!-- throw 抛出异常 -->
      <script>
        function counter(x,y){
            if(!x || !y){ 
                throw new Error("参数不能为空！")  
                console.log('hello');
            }
            return x+y
        }
        counter()
        console.log('hello---');
      </script>

      <!--try  catch  捕获异常 -->
      <p>123</p>
      <script>
        function fu(){
            try{
                const p = document.querySelector('.p')
                p.style.color = 'red'
            }catch(err){
                // 拦截错误，提示浏览器提供的错误信息，但是不中断程序的执行
                console.log(err.message); // 这个message是固定的参数
                // 需要加return 中断程序,也可以和抛出异常进行配合使用
                // return 
                // throw new Error(err.message)
                throw new Error('出错了吧，把基础学牢靠一点吧！')
            }finally{
                // 最终都要执行的代码,不管你的程序对不对，一定会执行
                alert('弹出对话框')
            }
        }
        fu()
      </script>
</body>
</html>
